<!--  -->
<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="4"
        ><div class="grid-content bg-purple">
          <el-button
            type="primary"
            icon="el-icon-back"
            @click="returnPage"
            circle
          ></el-button></div
      ></el-col>
      <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="4"
        ><div class="grid-content bg-purple">
          <el-button
            type="primary"
            icon="el-icon-thumb"
            @click="showAddEntity()"
            >用户授权</el-button
          >
        </div></el-col
      >
    </el-row>
    <el-table
      :data="pageList.records"
      border
      style="width: 100%"
      @selection-change="(selection) => tickUser(selection)"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="id" label="编号" width="50"></el-table-column>
      <el-table-column prop="uname" label="用户名" width="100">
      </el-table-column>
      <el-table-column prop="uphone" label="手机号" width="200">
      </el-table-column>
      <el-table-column prop="uemail" label="邮箱" width="300">
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="warning"
            size="small "
            icon="el-icon-delete"
            @click="revokePower(scope.row)"
            >取消授权</el-button
          ></template
        >
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout=" prev, pager, next, ->, total"
      :page-size="6"
      @current-change="changeRolePage"
      :total="pageList.total"
    >
    </el-pagination>

    <el-dialog title="用户" :visible.sync="showFlag" width="40%">
      <el-table
        :data="noPowerUserPage.records"
        border
        style="width: 100%"
        @selection-change="(selection) => tickUser(selection)"
      >
        <el-table-column type="selection" width="60"> </el-table-column>
        <el-table-column prop="id" label="编号" width="80"></el-table-column>
        <el-table-column prop="uname" label="用户名" width="159">
        </el-table-column>
        <el-table-column prop="uphone" label="电话" width="200">
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout=" prev, pager, next, ->,total"
        :page-size="5"
        :total="noPowerUserPage.total"
        @current-change="changPage"
      >
      </el-pagination>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addEntity">确定</el-button>
        <el-button @click="showFlag = false">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      roleId: 1,
      AllotPage: {
        roleId: 1,
        current: 1,
        size: 6,
      },
      idArr: [],
      showFlag: false,
      pageList: {},
      userPage: {
        roleId: 1,
        current: 1,
        size: 5,
      },
      //添加用户角色的分页对象
      noPowerUserPage: {},
    };
  },
  methods: {
    returnPage() {
      this.$router.go(-1);
    },
    //撤销用户角色
    revokePower(thisRow) {
      this.http({
        url: "allot/revokePower/" + thisRow.id + "/" + this.roleId,
        method: "delete",
      }).then(({ data }) => {
        if (data.code == 1) {
          this.$message({
            message: data.msg,
            type: "success",
          });
        }
        this.getEntityList();
      });
    },
    //勾选角色
    tickUser(selection) {
      var idArr = [];
      for (const key in selection) {
        idArr.push(selection[key].id);
      }
      this.idArr = idArr;
    },
    addEntity() {
      if (this.idArr.length == 0) {
        this.$message({
          message: "未选择!请选择后再试!",
          type: "warning",
        });
        return;
      }
      this.http({
        url: "allot/addRoleToUser/" + this.AllotPage.roleId,
        method: "post",
        data: this.idArr,
      }).then(({ data }) => {
        if (data.code == 1) {
          this.$message({
            message: data.msg,
            type: "success",
          });
          this.showFlag = false;
          this.getEntityList();
        }
      });
    },
    //弹出所有未授权的用户框
    showAddEntity() {
      //查询所有未授权的用户
      this.http({
        url: "allot/noAllotPower",
        data: this.userPage,
        method: "post",
      }).then(({ data }) => {
        if (data.code == 1) {
          this.noPowerUserPage = data.data;

          if (data.data.records == 0) {
            this.$message({
              message: "所有用户都有该权限!",
              type: "success",
            });
          } else {
            this.showFlag = true;
          }
        }
      });
    },
    changPage(current) {
      this.userPage.current = current;
      this.showAddEntity();
    },
    changeRolePage(current) {
      this.AllotPage.current = current;
      this.getEntityList();
    },
    //开始分页查询
    getEntityList() {
      debugger;
      this.http({
        url: "allot/roleAndUserPage",
        method: "post",
        data: this.AllotPage,
      }).then(({ data }) => {
        debugger;
        if (data.code == 1) {
          this.pageList = data.data;
        }
      });
    },
  },

  mounted() {
    debugger;
    var id = this.$route.params.id;
    this.AllotPage.roleId = id;
    this.userPage.roleId = id;
    this.roleId = id;
    this.getEntityList(id);
  },
};
</script>

<style>
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
}
</style>
